<template>
    <div class="main-news">

        <div class="fixedBottom">
            <div class="top " :class="{letter: selectedId==0||selectedId==7 ||selectedId==8}">
                <div class="header">
                    <div class="header-search flex-1" @click="toSearch">
                        <i  class="iconfont iconxuanchuan_icon_sousuo"></i>
                        <span> 请搜索相关新闻/视频/音频</span>
                    </div>
                    <!--<h3 class="title">{{org_name}}</h3>-->
                    <div class="header-notice">
                        <!--<i @click="toSearch" class="iconfont iconxuanchuan_icon_sousuo"></i>-->
                        <i @click="toInformation" class="iconfont iconxuanchuan_icon_xiaoxi"></i>
                    </div>
                </div>
                <div class="learnIndex">
                    <ly-tab v-model="selectedId" :data-sss="selectedId" :items="items" :options="options"
                            @change="handleChange"
                            style="width: 90%">
                    </ly-tab>
                    <i class="iconfont iconxuanchuan_icon_fenlei1" @click="navListShow"></i>
                </div>
            </div>
            <my-navsshow :navsShow.sync="navsShow" @changeSelect="changeSelected"></my-navsshow>
        </div>
        <div class="slide" ref='slide' @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="{transform: translateX}">
            <router-view></router-view>
        </div>
        <div>
            <div style="width: 100%;height: 49px"></div>
            <my-release :panelShow.sync="panelShow"></my-release>
            <img class="fabu_img" @click="showPanel" src="@as/img/propagandaIcon/xuanchuan_fabu_icon@2x.png" alt="">
        </div>
    </div>
</template>

<script>
    import LyTab from "@cp/index";
    import MyRelease from "./pages/popup/release";
    import MyNavsshow from "./pages/popup/navsshow";
    import Swiper from "swiper";
    import {mapState,mapMutations} from 'vuex'
    export default {
        components: {
            LyTab,
            MyNavsshow,
            MyRelease,
        },
        computed:{
            ...mapState({
                sub_class_obj:state=>state.initNews.sub_class_obj,
            })
        },
        watch:{
            selectedId(value) {
                console.log(value)
                this.selectedId = value;
            },
        },
        data() {
            return {
                org_name:'',
                selectedId: 0,
                bottomSelectedId: 0,
                items: [
                    // {label: "推荐", type: "0", link: '/',},
                    // {label: "一颗红心", type: "1", link: '/propaganda/love',},
                    // {label: "党建新闻", type: "2", link: '/propaganda/news',},
                    // {label: "党章党规", type: "3", link: '/propaganda/news',},
                    // {label: "重要讲话", type: "4", link: '/propaganda/news',},
                    // {label: "扶贫动态", type: "5", link: '/propaganda/news',},
                    // {label: "反腐倡廉", type: "6", link: '/propaganda/news',},
                    // {label: "党建相册", type: "7", link: '/propaganda/album',},
                    // {label: "党建微视", type: "8", link: '/propaganda/video',},
                    // {},
                ],
                options: {
                    activeColor: "#eb4d44",
                    color: "#999999"
                },

                panelShow: false,//发布弹窗   album     infrom  new  video
                navsShow: false,//全部导航
                Navsenior: [],//全部导航列表
                startX: 0, //开始触摸的位置
                lastsX: 0, //滑动时的位置
                endX: 0, //结束触摸的位置
                disX: 0, //移动距离
                lastX: 0, //上一次X坐标
                lastY: 0, //上一次Y坐标
                translateX: 'translateX(0px)',
            };
        },

        mounted() {
            console.log(this.$store.state.initNews)
            this.$progress.done();
            // this.initData(this.p);
            // this.seniorNav();
            this.org_name =JSON.parse(Cookies.get('user_71ydj')).organization;
            console.log(this.sub_class_obj)
            this.selectedId =this.sub_class_obj.selectedId;
        },
        created(){
            this.seniorNav();
        },
        methods: {
            ...mapMutations(['changeSubNav','addNavsenior']),
            changeSelected(item,index){
                this.selectedId =index;
                this.navsShow =false;
            },
            /**滑动事件 touchStart touchMove touchEnd*/
            touchStart: function (ev) {
                ev = ev || event;
                if($(ev.target).parents().hasClass('video_list')
                ||$(ev.target).parents().hasClass('navs-title')
                ||$(ev.target).parents().hasClass('swiper-container')
                 ||$(ev.target).parents().hasClass('video_page')
                ){
                    // ev.preventDefault();
                    // return false;
                }else{
                    if (ev.touches.length == 1) {
                        this.startX = this.lastsX = ev.touches[0].clientX;
                        this.lastY = ev.touches[0].clientY;
                    }
                }
            },
            touchMove: function (ev) {
                ev = ev || event;
                let slideWidth = this.$refs.slide.offsetWidth; //$refs 减少获取dom节点的消耗
                if($(ev.target).parents().hasClass('video_list')
                    ||$(ev.target).parents().hasClass('navs-title')
                    ||$(ev.target).parents().hasClass('swiper-container')
                    ||$(ev.target).parents().hasClass('video_page')
                   ){
                    // ev.preventDefault();
                    // return false;
                }else{
                    if (ev.touches.length == 1) {
                        this.disX = this.lastX - this.startX;
                        var disX = ev.touches[0].clientX - this.lastX
                        var disY = ev.touches[0].clientY - this.lastY
                        if (Math.abs(disX) > Math.abs(disY)&&Math.abs(disX) >=slideWidth / 4) {
                            this.translateX = 'translateX(' + this.disX + 'px)';
                        }
                        this.lastX = ev.touches[0].clientX;
                        this.lastY = ev.touches[0].clientY;
                    }
                }
            },
            touchEnd: function (ev) {
                ev = ev || event;
                if($(ev.target).parent().hasClass('video_list')
                    ||$(ev.target).parents().hasClass('navs-title')
                    ||$(ev.target).parents().hasClass('swiper-container')
                    ||$(ev.target).parents().hasClass('video_page')
                ){
                    // ev.preventDefault();
                    // return false;
                }else{
                    let slideWidth = this.$refs.slide.offsetWidth;
                    if (ev.changedTouches.length == 1) {
                        let endX = ev.changedTouches[0].clientX;
                        this.disX = endX - this.startX;
                        this.translateX = 'translateX(0px)';
                        if (Math.abs(this.disX) > (slideWidth / 3)) {
                            if (this.disX < 0) {
                                if(this.selectedId!=this.Navsenior.length-1){
                                    this.selectedId =this.selectedId+1;
                                }
                            }else{
                                if(this.selectedId!=0){
                                    this.selectedId =this.selectedId-1;
                                    this.$emit('change', 'right')
                                }
                            }
                            // if (this.disX < 0) {
                            //
                            //     switch(this.selectedId) {
                            //         case 0:
                            //             this.selectedId=1;
                            //             // this.$router.push({path:'/propaganda/love'})
                            //             break;
                            //         case 1:
                            //             this.selectedId=2;
                            //             // this.$router.push({path:'/propaganda/news'});
                            //             break;
                            //         case 2:
                            //             this.selectedId=3;
                            //             // this.$router.push({path:'/propaganda/news'});
                            //             break;
                            //         case 3:
                            //             this.selectedId=4;
                            //             // this.$router.push({path:'/propaganda/news',query: {id:this.Navsenior[this.selectedId-1].id,status:this.Navsenior[this.selectedId-1].status}});
                            //             break;
                            //         case 4:
                            //             this.selectedId=5;
                            //             // this.$router.push({path:'/propaganda/news',query: {id:this.Navsenior[this.selectedId-1].id,status:this.Navsenior[this.selectedId-1].status}});
                            //             break;
                            //         case 5:
                            //             this.selectedId=6;
                            //             // this.$router.push({path:'/propaganda/news',query: {id:this.Navsenior[this.selectedId-1].id,status:this.Navsenior[this.selectedId-1].status}});
                            //             break;
                            //         case 6:
                            //             this.selectedId=7;
                            //             // this.$router.push({path:'/propaganda/news',query: {id:this.Navsenior[this.selectedId-1].id,status:this.Navsenior[this.selectedId-1].status}});
                            //             break;
                            //         case 7:
                            //             this.selectedId=8;
                            //             // this.$router.push({path:'/propaganda/album',query: {id:this.Navsenior[this.selectedId-1].id,status:this.Navsenior[this.selectedId-1].status}});
                            //             break;
                            //         case 8:
                            //             this.selectedId=9;
                            //             // this.$router.push({path:'/propaganda/video',query: {id:this.Navsenior[this.selectedId-1].id,status:this.Navsenior[this.selectedId-1].status}});
                            //             break;
                            //     }
                            // } else {
                            //     switch(this.selectedId) {
                            //         case 1:
                            //             this.selectedId=0;
                            //             break;
                            //         case 2:
                            //             this.selectedId=1;
                            //             break;
                            //         case 3:
                            //             this.selectedId=2;
                            //             break;
                            //         case 4:
                            //             this.selectedId=3;
                            //             break;
                            //         case 5:
                            //             this.selectedId=4;
                            //             break;
                            //         case 6:
                            //             this.selectedId=5;
                            //             break;
                            //         case 7:
                            //             this.selectedId=6;
                            //             break;
                            //         case 8:
                            //             this.selectedId=7;
                            //             break;
                            //         case 9:
                            //             this.selectedId=8;
                            //             break;
                            //     }
                            //     this.$emit('change', 'right')
                            //
                            // }
                        }
                    }
                }

            },
            /**导航点击事件*/
            handleChange(item,index) {
                console.log(index)
                console.log(item.class_name);
                // this.options.activeColor='#333'
                // this.options.color='#333'
                if(this.selectedId==1||this.selectedId==2||this.selectedId==3||this.selectedId==4||this.selectedId==5||this.selectedId==6){
                    this.options.activeColor='#EB4D44'
                    this.options.color='#333'
                }else if(this.selectedId==0){
                    this.options.activeColor='#EB4D44'
                    this.options.color='#333333'
                }
                else {
                    this.options.activeColor='#EB4D44'
                    this.options.color='#333'
                };
                this.$store.commit('changeIndex',{
                    selectName:item.class_name
                });
                this.changeSubNav({
                    class_id: this.Navsenior[index].id,
                    status:this.Navsenior[index].status,
                    selectedId:this.selectedId
                });
                this.$router.replace({path: `${item.link}`});

            },
            /**消息跳转*/
            toInformation() {
                this.$router.replace('/propaganda/details/information')
                // if (this.selectedId==0){
                //     this.$router.push('propaganda/details/information')
                // } else {
                //     this.$router.push('details/information')
                // }
            },
            /**搜索*/
            toSearch() {
                if (this.selectedId==0){
                    this.$router.replace({path: "/propaganda/details/search"})
                } else {
                    this.$router.replace({path: "/propaganda/details/search"})
                }
            },
            /** 发布*/
            showPanel() {
                this.panelShow = true;
            },
            /**全部导航*/
            navListShow() {
                this.navsShow = true;
            },
            /**顶级导航*/
            seniorNav() {
                let Navsenior =JSON.parse(localStorage.getItem('Navsenior'));
                this.Navsenior =Navsenior;
                Navsenior.forEach((e,index) => {
                    e.label = e.class_name;
                    e.type =  index;
                    this.items = [...this.Navsenior];
                    if (e.label == '党建微视') {
                        e.link = '/propaganda/video'
                    }else if (e.label == '党建相册') {
                        e.link = '/propaganda/album';
                    }else if (e.label == '推荐') {
                        e.link = '/propaganda'
                    }else if (e.label == '一颗红心') {
                        e.link = '/propaganda/love';
                    }else{
                        e.link = '/propaganda/news';
                    }
                })
                this.addNavsenior({
                    Navsenior:Navsenior
                });
            },
            initData(p) {
                this.$http
                    .get("app/NewCustom/home_page", {
                        p: p,
                        page: 10,
                        org_id: JSON.parse(Cookies.get("user_71ydj")).organization_id,
                        uid: JSON.parse(Cookies.get("user_71ydj")).id,
                    })
                    .then(res => {
                        if (res.data.length < 10) {
                            this.loaded = "没有更多";
                            this.indexData = res.data;
                            this.loading = true;
                            this.notMore = false;
                            return;
                        }
                        this.indexData = res.data;
                        this.loading = false;
                    });
            },
            load() {
                //因为load 触发多次 所以做分时节流
                this.loading = true;
                // if (this.notMore) {
                //     clearTimeout(this.method);
                //     this.method = setTimeout(() => {
                //         this.p = this.p + 1;
                //         this.initData(this.p);
                //     }, 500);
                // }
            },
        }
    };
</script>

<style lang="scss" scoped>

    .learnIndex {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;

    }

    .learnIndex i {
        /*margin-right: 16px;*/
    }

    p {
        margin: 0;
        padding: 0;
    }

    .top {
        width: 100%;
        background: #fff;
        box-shadow: 0 2px 3px #f8f8f8;
        z-index: 99999;
    }
    .main-news{
        .top .header {
            height: 36px;
            /*width: 359px;*/
            /*padding: 15px 0 0 16px;*/
            display: flex;
            justify-content: space-between;
        }
        .top .title {
            margin: 0 !important;
            font-size: 19px;
            font-weight: bold;
            color: #333;
            font-size: 19px;
            font-weight: bold;
            color:rgba(51, 51, 51, 1);
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .top i{
            font-size: 19px;
            color: #333;
        }
        .top .title {
            margin: 0 !important;
            font-size: 19px;
            font-weight: bold;
            color: #333;
        }
        .top i{
            font-size: 19px;
            color: #333;
        }

        .letter {
            width: 100%;
            /*background: linear-gradient(0deg, rgba(235, 77, 68, 1) 0%, rgba(244, 117, 72, 1) 100%);*/

        }

        .top   .header {
            padding: 15px 16px 0 16px;
            height: 36px;
            display: flex;
            justify-content: space-between;
            box-sizing: content-box;
        }
        .letter .title {
            margin: 0 !important;
            font-size: 19px;
            font-weight: bold;
            color: #fff;
        }

        .letter i{
            font-size: 19px;
            color:#333333;
        }

        /*.header div {*/
        /*display: flex;*/
        /*align-items: center;*/
        /*width: 60px;*/
        /*justify-content: space-between;*/
        /*}*/
        .top img {
            width: 19px;
            height: 19px;
        }
    }

    .fabu_img {
        position: fixed;
        bottom: 70px;
        width: 43px;
        height: 43px;
        right: 10px;
        z-index: 9;
    }
    .fixedBottom{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 80px;
        z-index: 999;
    }
    .main-news .slide{
        min-height:80vh;
        margin-top: 80px;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
    .header-search{
        height: 36px;
        line-height: 36px;
        background:rgba(246,246,246,1);
        border-radius:18px;
        padding-left: 10px;
        .iconfont:before{
            color:rgba(153,153,153,1);
            font-size: 10px;
        }
        span{
            font-size:13px;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(153,153,153,1);
        }
    }
    .flex-1{
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        min-width: 0;
        height: 100%;
        font-size: 12px;
    }
    .header-notice{
        width: 20px;
        height: 20px;
        vertical-align:top;
        margin-left: 10px;
        margin-top: 5px;
       .iconfont:before{
            vertical-align: top;
            color: #333333;
            margin-top: 10px;
        }
    }
</style>